<!-- 行车日志 -->
<template>
	<view>
		<view class="driving-log" v-show="logList.length">
			<view class="log-item" v-for="log in logList" :key="log.id">
				<view class="log-time">
					<text class="short-text">{{log.createTime.replace('T',' ')}}</text>
				</view>
				<view class="log-content radius shadow">
					<view class="top">
						<text class="type">{{runLogType[log.logType]}}</text>
						<text class="number">{{log.vehCode}}</text>
						<text class="number2">{{log.trailerVehCode}}</text>
					</view>
					<view class="center">
						<text class="name">{{log.creatorName}}</text>
						<text class="weather">{{log.weather}}</text>
					</view>
					<view class="address" v-if="log.logType!=11">
						<view class="img">
							<image src="@/static/image/weizhi.png" mode="widthFix"></image>
						</view>
						<view class="addr-text" >
							<text>{{log.recordPlace,getAddress(log)}}</text>
						</view>
					</view>
					<view class="bottom">
						<text>{{logContent(log)}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="driving-log-btn" v-if="showBtn">
			<view class="btn-item in-transit" @click="$goBack('./inspect/out-car?'+param(1))" v-if="ccqBtn">
				<text class="short-text">出车前检查</text>
			</view>
			<view class="btn-item in-transit" @click="$goBack('./inspect/in-transit?param='+param())" v-if="yszBtn">
				<text class="short-text">运输中检查</text>
			</view>
			<view class="btn-item collect-car" @click="$goBack('./inspect/collect-car?param='+param())" v-if="scjcBtn">
				<text class="short-text">收车检查</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['info'],
		data() {
			return {
				logList: [],
				runLogType: {
					'10': '出车前检查',
					'11': '已发车',
					'20': '运输中的日志',
					'21': '装货完成',
					'22': '停车休息',
					'23': '运输中检查',
					'24': '临时停靠',
					'25': '换班休息',
					'26': '卸货完成',
					'27': '运单完成',
					'30': '回场检查',
					'40': '日常维护',
					'50': '车辆加油',
					'60': '故障事故'
				},
				logInit: false
			};
		},
		computed: {
			userType() {
				return this.$store.getters.userType;
			},
			showBtn() {
				return this.logInit &&
					this.userType == '3' &&
					this.info &&
					this.info.approvalState != 1 &&
					(this.ccqBtn || this.yszBtn || this.scjcBtn);
			},
			ccqBtn() {
				// 运单状态为已创建10，且未做出车前检查10，则显示
				return this.logList.filter(o => o.logType == '10').length == 0 && this.$store.info.billState == '10'
			},
			yszBtn() {
				// 运单状态为“已创建”10、“已装货”20、“已卸货”40、“运输中”30，则显示
				return ['10', '20', '30', '40'].includes(this.$store.info.billState)
			},
			scjcBtn() {
				// 未做收车检查30，且运单状态为“已回场”60、“已完成”50，则显示
				return this.logList.filter(o => o.logType == '30').length == 0 && ['50', '60'].includes(this.$store.info
					.billState)
			},
		},
		methods: {
			getAddress(log) {
				this.$api.getAddress(`${log.lon},${log.lat}`).then(res => {
					log.recordPlace = res.data.regeocode.formatted_address
				})
			},
			param(type = 0) {
				const param = {
					'taskId': this.info['taskId'],
					'vehId': this.info['vehId'],
					'vehCode': this.info['vehCode'],
					'trailerId': this.info['trailerId'],
					'trailerVehCode': this.info['trailerVehCode'],
					'goodsInfo': this.info['goodsInfo'],
				}
				if (type) {
					return Object.keys(param).map(k => k + '=' + param[k]).join('&')
				}
				return JSON.stringify(param);
			},
			logContent(log) {
				var res = '';
				if (log.logType == '22' || log.logType == 24) {
					res = log.logContent;
				} else {
					log.list.forEach((item) => {
						res += item['checkPro'];
						if (item['checkResult'] == 0) {
							res += '正常';
						} else if (item['checkResult'] == 1) {
							res += '异常';
						} else {
							res += '已检修';
						}
						res += ';';
					})
				}
				return res;
			},
			getList() {
				this.$api.mgntvehrunlogPage({
					taskId: this.$store.info.taskId,
					size: 20
				}).then((res) => {
					this.logInit = true;
					const resData = res.data.data;
					// console.log(resData)
					if (resData.records && resData.records.length) {
						this.logList = resData.records;
						console.log(123, resData.records)
					}
				})
			}
		},
		mounted() {
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.driving-log {
		border-left: 2rpx solid #999;
		margin-top: 20rpx;
		padding-bottom: 100rpx;

		.log-item {
			padding-left: 26rpx;
			padding-bottom: 56rpx;
			position: relative;

			.log-time {
				color: #666666;
				line-height: 20rpx;
				margin-bottom: 30rpx;
			}

			.log-content {
				background-color: #FFFFFF;
				padding-bottom: 40rpx;

				.top {
					padding-top: 6rpx;

					.type {
						border-radius: 4rpx;
						background-color: $app-color;
						transform: skewX(-9deg);
						display: inline-block;
						padding: 0 0.5em;
						margin-right: 20rpx;
						font-weight: bold;
						font-size: 26rpx;
					}

					.number {
						font-weight: bold;
					}

					.number2 {
						float: right;
					}
				}

				.center {
					padding: 0.5em 0;

					.name {
						color: #666666;
						margin-right: 20rpx;
						font-weight: bold;
					}

					.weather {
						color: #666666;
						font-weight: bold;
					}
				}

				.address {
					display: flex;
					margin-bottom: 26rpx;

					.img {
						width: 30rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
						}
					}

					.addr-text {
						line-height: 1.5em;
						font-size: 28rpx;
					}
				}

				.bottom {
					background-color: #fffbf0;
					padding: 20rpx;
					border-radius: 6rpx;
					line-height: 1.5em;
				}
			}

			&::after {
				content: "";
				position: absolute;
				background-color: #FFFFFF;
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				border: 6rpx solid #999;
				left: 0rpx;
				transform: translateX(-50%);
				margin-left: -1rpx;
				top: 0;
			}
		}
	}

	.driving-log-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.3);
		background-color: #FFFFFF;
		padding: 30rpx 4%;
		text-align: center;

		.btn-item {
			display: inline-block;
			width: 36%;
			margin: 0 5%;
			font-size: 32rpx;
			font-weight: bold;
			line-height: 2.6em;
			border-radius: 2.6em;
			background: linear-gradient(to right, #fed24d, #ffea7f);
		}

		.in-transit {
			color: #FFFFFF;
		}

	}
</style>